<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8" />
    <title>Region - ESUI Demo</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/google-code-prettify/prettify.css" />
    <link rel="stylesheet" href="assets/themes/standard.css" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" href="assets/ie8.css" />
    <![endif]-->
</head>
<body>
    <div class="header">
        <h1 id="branding">ESUI - Region</h1>
    </div>
    <div class="ui-g main-container">
        <div id="side-bar" class="ui-u-1-5">
            <ul id="navigator" class="ui-nav">
            </ul>
        </div>
        <div id="main" class="ui-u-4-5">
            <h2>多种模式</h2>
            <div class="intro">
                <p>地域选框有2种模式：多选、单选。</p>
            </div>
            <div class="example ui-demo-light-stage">
                <h3>多选</h3>
                <div class="row">
                    <div data-ui="type:Region;id:test;name:region1"></div>
                </div>
                <h3>单选</h3>
                <div class="row">
                    <div data-ui="type:Region;mode:single;"></div>
                </div>
            </div>
            <h2>状态</h2>
            <div class="intro">
                <p>readOnly模式与disable模式的展示相同，不同是readOnly可以获取到选择的值</p>
            </div>
            <div class="example ui-demo-light-stage">
                <h3>只读</h3>
                <div class="row">
                    <div data-ui="type:Region;id:readonly;name:region3;"></div>
                </div>
                <h3>不可用</h3>
                <div class="row">
                    <div data-ui="disabled:1;type:Region;id:disabledRegion;"></div>
                </div>
            </div>
        </div>
    </div>
    <script src="assets/loader/esl.js"></script>
    <script src="config.js"></script>
    <script src="demo.js"></script>
    <script src="assets/google-code-prettify/prettify.js"></script>
    <script id="main-js">
    require(
        [
            'esui',
            'esui/Region',
            'esui/Button',
            'esui/Tab',
            'demo'
        ],
        function (ui) {
            ui.init();
            var region1 = ui.get('test');
            var region3 = ui.get('readonly');

            region1.setProperties({
                rawValue: ['268', '269', '270']
            });

            region3.setProperties({
                rawValue: ['268', '269', '270'],
                readOnly: true
            });
        }
    );
    </script>
    <script src="sitemap.js"></script>
</body>
</html>
